<template>
  <div>
    <!-- 录播图 -->
    <div class="mySwiper">
      <my-swiper :key="myList.length">
        <swiper-item v-for="item in myList" :key="item.id">
          <img :src="item.img" alt="" />
        </swiper-item>
      </my-swiper>
    </div>
    <!-- header  -->
    <home-head class="sticky"></home-head>
    <!-- 必须有插槽 -->
    <router-view></router-view>
  </div>
</template>

<script>
import mySwiper from '@/components/homes/MySwiper.vue'
import swiperItem from '@/components/homes/SwiperItem.vue'
import homeHead from '@/components/homes/HomeHead.vue'
export default {
  components: {
    mySwiper,
    swiperItem,
    homeHead
  },
  data () {
    return {
      myList: []
    }
  },
  mounted () {
    fetch('/my.json')
      .then((res) => res.json())
      .then((res) => (this.myList = res))
  }
}
</script>

<style lang='scss' scoped>
.sticky {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 999;
}
.mySwiper {
  width: 100%;
  height: 12.5rem;
}
</style>
